
<template>
  <div class="order">
    <div class="order-header">
      <div class="title">
        <i class="el-icon-s-order" style="color: #ff6700"></i>
        我的订单
      </div>
    </div>
    <div class="content" v-show="data.length > 0">
      <el-card v-for="item in data" :key="item.id">
        <div class="listbox">
          <p>订单编号:{{ item.order_id }}</p>
          <p>
            订单时间:{{ item.order_time | dateformat("YYYY-MM-DD HH:mm:ss") }}
          </p>
        </div>
        <el-table style="width: 100%" :data="data">
          <el-table-column prop="product_picture" width="180">
            <template v-slot="scope">
              <img
                :src="'http://39.100.7.70:81/' + scope.row.product_picture"
                alt
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="product_name"
            label="商品名称"
            width="380"
          ></el-table-column>
          <el-table-column
            prop="product_price"
            label="单价"
            width="160"
          ></el-table-column>
          <el-table-column
            prop="product_num"
            label="数量"
            width="190"
          ></el-table-column>
          <el-table-column label="小计" width="160">
            <template v-slot="scope">{{
              scope.row.product_price * scope.row.product_num
            }}</template>
          </el-table-column>
        </el-table>
        <div class="listDown">
          <p>
            共
            <span>2</span>件商品
          </p>
          <p>
            合计
            <span>{{ item.product_num * item.product_price }}</span
            >元
          </p>
        </div>
      </el-card>
    </div>
    <div v-show="data.length == 0" class="collect-empty">
      <div class="empty">
        <h2>您的订单还是空的！</h2>
        <p>快去购物吧！</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      data: [
        {
          id: 3777,
          order_id: 30641618817555504,
          order_time: 1618817555506,
          product_id: 3,
          product_name: "小米CC9 Pro",
          product_num: 1,
          product_picture: "public/imgs/phone/Mi-CC9.png",
          product_price: 2599,
          user_id: 3064,
        },
        {
          id: 3768,
          order_id: 30641618811613224,
          order_time: 1618811613223,
          product_id: 9,
          product_name: "小米电视4A 32英寸",
          product_num: 1,
          product_picture: "public/imgs/appliance/MiTv-4A-32.png",
          product_price: 799,
          user_id: 3064,
        },
      ],
    };
  },
};
</script>
<style lang='scss' scoped>
.order {
  background-color: #f5f5f5;
  .order-header {
    height: 64px;
    background-color: #fff;
    border-bottom: 2px solid #ff6700;
    .title {
      width: 1225px;
      padding: 0 200px;
      height: 64px;
      line-height: 58px;
      font-size: 28px;
    }
  }
  .content {
    width: 1225px;
    padding: 20px 200px;
    margin: 0 auto;
    background-color: #f5f5f5;
    .el-card {
      width: 100%;
      height: 100%;
      margin-bottom: 20px;
      .listbox {
        width: 100%;
        height: 76px;
        border-bottom: 1px solid #ff6700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          font-size: 16px;
        }
      }
      .listDown {
        width: 100%;
        height: 76px;
        border-bottom: 1px solid #ff6700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          span {
            color: red;
          }
        }
      }
    }
  }
}
img {
  width: 64px;
  height: 82px;
}
.collect-empty {
  width: 100%;
  background: #f5f5f5;
  .empty {
    height: 300px;
    padding: 0 0 130px 558px;
    margin: 65px 0 0;
    background: url(../assets/cart-empty.png) no-repeat 124px 0;
    color: #b0b0b0;
    overflow: hidden;
    h2 {
      margin: 70px 0 15px;
      font-size: 36px;
    }
    p {
      margin: 0 0 20px;
      font-size: 20px;
    }
  }
}
</style>